<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" href="fonts/iconfonts.css" th:href="@{/fonts/iconfonts.css}">
    <script type="text/javascript" src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" src="layui/layui.js" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" src="/js/commodity.js" th:src="@{/js/commodity.js}"></script>
</head>
<body>
<!-- 条件查询商品列表，表单 -->
    <form class="layui-form" id="searchForm">
        <div class="layui-form-item" style="display: inline">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="title" id="title" placeholder="请输入标题">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text"  class="layui-input" name="serial" id="serial" placeholder="请输入商品编号">
                </div>
            </div>
            <div class="layui-inline">
                <select name="state" id="state">
                    <option value="">请选择商品状态</option>
                    <option value="1">售出中</option>
                    <option value="2">售罄</option>
                    <option value="3">下架</option>
                    <option value="4">用户已删除</option>
                </select>
            </div>
            <div class="layui-inline">
                <select name="categoryId" id="categoryId">
                    <option value="">请选择商品分类</option>
                </select>
            </div>
        <!-- 日期范围选择 -->
            <div class="layui-inline">
                <input type="text" name="dateRange" id="dateRange" class="layui-input" placeholder="选择日期范围" style="width: 200px;">
            </div>
            <button type="button" class="layui-btn" id="searchBtn" data-type="reload" >搜索</button>
        </div>
    </form>
<!-- 数据表格 -->
    <table width="100%" class="layui-hide" id="list" lay-filter="list">

    </table>

<!-- 头部工具栏 -->
    <script type="text/html" id="toolbarList">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addCommodity">添加商品</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="refresh"><i class="iconfont iconshuaxin"></i>&nbsp;刷新</button>
    </script>
<!--  行内工具栏  -->
    <script type="text/html" id="barInline">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="toCommodityDetail">详情</a>
        {{# if(d.state == 1 ){ }}
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">下架</a>
        {{# } }}
    </script>

<!-- 数据格式 -->
    <script type="text/html" id="categoryTpl">
        {{d.category.cateName}}
    </script>
    <script type="text/html" id="userTpl">
        {{d.user.nickName}}
    </script>
    <script type="text/html" id="stateTpl">
        {{#  if(d.state == 1){ }}
            <button class="layui-btn layui-btn-xs layui-btn-normal">出售中</button>
        {{#  } else if(d.state == 2) { }}
            <button class="layui-btn layui-btn-xs layui-btn-primary">售罄</button>
        {{#  } else if(d.state == 3) { }}
            <button class="layui-btn layui-btn-xs layui-btn-warm">下架</button>
        {{#  } else if(d.state == 4) { }}
            <button class="layui-btn layui-btn-xs layui-btn-disabled">删除</button>
        {{# } }}
    </script>
</body>
</html>